<template>
  <div class="box">
    <div class="content">
      <div class="notfoundbox">
        <div class="ImgAngTxt">
          <img src="../../lib/img/404/404.png" alt="">
          <p>哎呦~,页面好像丢了呢~</p>
          <button @click="backFn">点击返回主页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)
export default {
  // 设置data初始值
  data () {
    return {}
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    backFn () {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  .content {
    .notfoundbox {
      position: relative;
      width: 100%;
      height: 100%;
      .ImgAngTxt {
        position: absolute;
        top: 20%;
        left: 50%;
        margin-left: -1.5rem;
        text-align: center;
        img {
          width: 3.0rem;
          height: 1.5rem;
        }
        p {
          line-height: 0.8rem;
          font-size: .20rem;
        }
        button {
          width: 100%;
          height: 0.6rem;
          margin-top: .50rem;
          background-color: #fdd949;
          border: 0;
          border-radius: .16rem;
          font-size: .20rem;
        }
      }
    }
  }
</style>
